<template>
  <div class="outpatientSet-container">
    <el-dialog
      title="门诊设置"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="outpatientSet-main">
        <!-- <div class="style-container items">
          <div class="title-container">
            <p class="title-content">病历格式</p>
          </div>
          <div class="item-container">
            <el-radio v-model="dataform.styles" :label="1">西医格式</el-radio>
            <el-radio v-model="dataform.styles" :label="2">中医格式</el-radio>
            <el-radio v-model="dataform.styles" :label="3">口腔格式</el-radio>
          </div>
        </div> -->
        <div class="field-container items">
          <div class="title-container">
            <p class="title-content">病历字段</p>
          </div>
          <div class="item-container">
            <el-checkbox-group
              v-model="dataform.checkedField"
              @change="handleCheckedFieldChange"
            >
              <el-checkbox
                v-for="itm in fields"
                :label="JSON.stringify(itm)"
                :value="itm.name"
                >{{ itm.title }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="type-container items">
          <div class="title-container">
            <p class="title-content">处方类型</p>
          </div>
          <div class="item-container">
            <el-checkbox-group v-model="dataform.checkTypeList">
              <el-checkbox label="成药处方"></el-checkbox>
              <el-checkbox label="饮片处方"></el-checkbox>
              <el-checkbox label="注射液"></el-checkbox>
              <el-checkbox label="常用处方"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="border-btn" @click="cancelSave">取 消</el-button>
        <el-button class="main-btn" type="primary" @click="comfrimSave"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checkAll: false,
      fields: [
        {
          sort: 2,
          title: "既往史",
          name: "past_history",
          value: "",
        },
        {
          sort: 3,
          title: "个人史",
          name: "personal_history",
          value: "",
        },
        {
          sort: 4,
          title: "过敏史",
          name: "allergy_history",
          value: "",
        },
        {
          sort: 5,
          title: "体格检查",
          name: "tigejiancha",
          value: "",
        },
      ],
      isIndeterminate: true,
      dataform: {
        styles: 1,
        checkedField: [], // 在vuex李配了默认选中
        checkTypeList: ["成药处方", "饮片处方", "注射液", "常用处方"],
      },
    };
  },
  created() {
    // this.dataform.checkedField.forEach((itm, idx) => {
    //   this.$set(this.dataform.checkedField, idx, JSON.stringify(itm));
    // });
    console.log(this.dataform);
  },
  methods: {
    cancelSave() {
      this.$emit("cancel-save");
      this.dialogVisible = false;
    },
    comfrimSave() {
      this.dialogVisible = false;
      console.log(this.dataform);
      this.$emit("comfrim-save", this.dataform);
    },
    openDialog() {
      this.dialogVisible = true;
      this.dataform = JSON.parse(JSON.stringify(this.$store.getters.userHabit));
      this.dataform.checkedField.forEach((itm, idx) => {
        if(itm.name=="tigejiancha"){
          itm.value = ""
        }
        this.$set(this.dataform.checkedField, idx, JSON.stringify(itm));
      });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? fields : [];
      this.isIndeterminate = false;
    },
    handleCheckedFieldChange(value) {
      value.sort((a, b) => {
        return JSON.parse(a).sort - JSON.parse(b).sort;
      });
      console.log(value);
      this.dataform.checkedField = value;
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.fields.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fields.length;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/outpatient/modules/outpatientSet.scss";
</style>